<template>
	<block>
		<!-- <block v-if="!uid">
			<view class="content1">
				<view class="header "><image src="" class="bg-gradual-blue round" mode="aspectFill"></image></view>

				<view class="content11">
					<view>申请获取以下权限</view>
					<text>获得你的公开信息(昵称，头像等)</text>
				</view>

				<button class="bottom" type="primary" open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo">授权登录</button>
			</view>
		</block> -->      
			<!-- // v-else           -->
		<view class="content">
			<view class="header-box flex-box" style="padding-left: 30rpx;">
				<view class="" @click="goHome">
					<u-icon name="arrow-left" color="#fff" size="32"></u-icon>
				</view>
				<view class="">
					设备租赁
				</view>
				<view class="">
				</view>
			</view>
			<view class="toop">
				<!-- <view class="toopp margin-top" @click="jumpSrch">
					<view class="toopp_a">
						<image src="../../static/shos.png" mode=""></image>
						<input type="text" placeholder="请输入您所需要的产品名称" disabled placeholder-style="color: #FFFFFF;" />
					</view>
					<view class="toopp_b">
						<image src="../../static/Home_top.png" mode=""></image>
						<p>客服</p>
					</view>
				</view> -->
				<!-- 轮播图 -->
				<banner :details="getHomelist.first_place"></banner>
			</view>

			<view class="xiaobiao">
				<!-- <view v-for="(item,index) in getHomelist.classify" :key="index">
					getHomelist
				</view>
				 -->

				<view class="xiaotu">
					<image src="../../static/xufu.png" mode=""></image>
					<span>知名品牌</span>
				</view>
				<view class="xiaotu">
					<image src="../../static/anxin.png" mode=""></image>
					<span>需付押金</span>
				</view>
				<view class="xiaotu">
					<image src="../../static/zhiming.png" mode=""></image>
					<span>安心租赁</span>
				</view>
			</view>

			<!-- 二级导航 -->
			<view class="secondaryNav shadow"><ification :details="getHomelist.classify"></ification></view>

			<!-- <view class="xiaoxi">
				<p class="xiaoxi_title">立即发布需求，第一时间获取租赁公司报价立即发布需求，第一时间获取租赁公司报价</p>
				<p class="xiaoxi_lei">
					已有
					<span>100w+</span>
					用户通过本通过本途径解需求发布通需求发通过本途径解需求发真实需户通过本途径解需求请发布真实需求
				</p>
				<view class="fabu" @click="fabu">发布需求</view>
			</view> -->

			<!-- <view class="vip_zhongxin">
				<p>严选服务</p>
				<view class="vip_tu">
					<image class="r" :src="getHomelist.optional.left.image" mode="aspectFill"></image>
					<image class="r" :src="getHomelist.optional.right.image" mode="aspectFill"></image>
				</view>
			</view> -->

			<view class="select" style="margin-bottom: 20rpx;">
				<view @click="isSelect = 0" :class="['selects', isSelect === 0 ? 'toggle' : ' ']">热门租赁</view>
				<!-- <view @click="isSelect = 1" :class="['selects', isSelect === 1 ? 'toggle' : ' ']">活动公司</view> -->
				<!-- <view @click="isSelect = 2" :class="['selects', isSelect === 2 ? 'toggle' : ' ']">热门厂家</view> -->
			</view>

			<!-- 商城音响 -->
			<view v-show="isSelect == 0 || isSelect == 1 || isSelect == 2"><stereo :details="getHomelist.list"></stereo></view>
			<!-- <view v-show="isSelect === 1" class="shangdian">
				
				<u-empty text="暂无列表" mode="favor"></u-empty>
			</view>
			<view v-show="isSelect === 2" class="shangdian">
				
				<u-empty text="暂无列表" mode="favor"></u-empty>
			</view> -->
		</view>
	</block>
</template>

<script>
import banner from '@/pages/index/components/banner.vue';
import ification from '@/pages/index/components/ification.vue';
import stereo from '@/pages/index/components/stereo.vue';
export default {
	components: {
		banner,
		ification,
		stereo,
	},
	data() {
		return {
			uid:'',
			isSelect: 0,
			mode: 'noMore',
			getHomelist: {},
			list: [
				{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					title: '身无彩凤双飞翼，心有灵犀一点通',
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
				},
			],
			fenl: [
				{
					icon: '/static/VIP_tu.png',
					text: '舞台音响',
				},
				{
					icon: '/static/VIP_tu.png',
					text: '舞台音响',
				},
				{
					icon: '/static/VIP_tu.png',
					text: '舞台音响',
				},
				{
					icon: '/static/VIP_tu.png',
					text: '舞台音响',
				},
			],
		};
	},
	onLoad() {
		this.uid = uni.getStorageSync('uid');
		console.log('this.uid :>> ', this.uid);
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#ff0000',
		}),
		this.shopHm();
	},
	methods: {
		onGotUserInfo(e) {
			if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了授权！');

			this.getToken(e.detail);
		},
		async getToken(info) {
			const [err, res] = await uni.login().catch(err => err);
			if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败！');

			uni.setStorageSync('info', info.userInfo);
			console.log('fid >>', uni.getStorageSync('fid'));
			const data = await this.$u.post('api/set/wx_login', {
				code: res.code,
				id: uni.getStorageSync('fid'),
			});

			const data1 = await this.$u.post('api/set/user_info', {
				info: info.userInfo,
				openID: data.data.openid,
			});

			if (!data1.code) return uni.$showMsg('登录失败');
			uni.setStorageSync('uid', data1.data);
			this.$forceUpdate()
			
			uni.$showMsg('用户登录成功！');
		},
		jumpSrch() {
			uni.navigateTo({
				url: './xuqiu/srchFor',
			});
		},
		/* 店铺首页 */
		async shopHm() {
			let obj = {
				page: 1,
				limit: 100,
			};
			const res = await this.$u.post('api/shop/home_index', obj, {});
			if (!res.code) return uni.$showMsg();
			this.getHomelist = res.data;
			console.log('this.getHomelist: 店铺首页', this.getHomelist);
		},
		
		goHome() {
			uni.navigateTo({
				url: '/pages/tab/home'
			})
		}
	},
};
</script>

<style lang="scss" scoped>
.content1 {
	width: 100vw;
	height: 100vh;
	background-color: #ffffff;
	overflow: hidden;
	.header {
		margin: 90rpx 0 90rpx 50rpx;
		// border-bottom: 1px solid #ccc;
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		line-height: 450rpx;
		display: flex;
		justify-content: center;
		align-items: center;
        
	}

	.header image {
		width: 200rpx;
		height: 200rpx;
	}

	.content11 {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content11 text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 35rpx;
	}
}
.content {
	width: 100%;
	height: 100%;
	background-color: #f5f8fd;
	
	
	.header-box {
		width: 100%;
		height: 200rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		background-color: #ff0000;
	}
	
}
.secondaryNav {
	box-shadow: 0px 0px 6px 0px rgba(13, 21, 28, 0.1);

	width: 690rpx;
	height: 180rpx;

	background: #ffffff;
	border-radius: 10rpx;
	margin: 0 auto;
	margin-top: 25rpx;
}
.toop {
	width: 100%;
	min-height: 250rpx;
	background-color: #ff0000;
	border-radius: 0 0% 30% 30%;
	.toopp {
		width: 690rpx;
		height: 70rpx;
		margin: auto;
		display: flex;
		justify-content: space-around;
		.toopp_a {
			width: 624rpx;
			height: 60rpx;
			background-color: #ffa3a1;
			//padding-top: 5rpx;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			image {
				width: 27rpx;
				height: 27rpx;
				margin-left: 25rpx;
				//margin-top: 18rpx;
			}
			input {
				width: 524rpx;
				font-size: 24rpx;
				margin-left: 20rpx;
				color: #ffffff;
				//margin-top: 7rpx;
			}
		}
		.toopp_b {
			width: 47rpx;
			height: 70rpx;
			image {
				width: 41rpx;
				height: 38rpx;
				margin-left: 5rpx;
			}
			p {
				width: 47rpx;
				height: 23rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 20rpx;
			}
		}
	}
}
.xiaobiao {
	width: 690rpx;
	height: 70rpx;
	padding-top: 20rpx;
	margin: auto;
	// margin-top: 95rpx;
	padding-top: 20rpx;
	display: flex;
	justify-content: space-around;
	.xiaotu {
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		justify-content: space-around;
		image {
			width: 23rpx;
			height: 23rpx;
			margin-top: 20rpx;
		}
		span {
			font-size: 24rpx;
			font-family: PingFang SC;
			color: #999999;
			margin-left: 12rpx;
			display: block;
			margin-top: -5rpx;
		}
	}
}
.xiaoxi {
	width: 690rpx;
	height: 154rpx;
	margin: auto;
	background: #ffffff;
	box-shadow: 0px 0px 6px 0px rgba(13, 21, 28, 0.1);
	border-radius: 10px 10px 10px 10px;
	margin-top: 30rpx;
	position: relative;
	.xiaoxi_title {
		width: 650rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-left: 20rpx;
	}
	.xiaoxi_lei {
		width: 462rpx;
		height: 70rpx;
		line-height: 35rpx;
		font-size: 22rpx;
		color: #999999;
		margin-left: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		span {
			color: #ff0000;
		}
	}
	.fabu {
		width: 160rpx;
		height: 50rpx;
		background: #fb0101;
		border-radius: 25px;
		font-size: 30rpx;
		color: #ffffff;
		text-align: center;
		line-height: 50rpx;
		position: absolute;
		top: 90rpx;
		left: 500rpx;
	}
}
.vip_zhongxin {
	width: 690rpx;
	height: 250rpx;
	margin: auto;
	margin-top: 30rpx;
	p {
		width: 152rpx;
		height: 40rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 20px;
	}
	.vip_tu {
		width: 690rpx;
		height: 191rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		image {
			width: 335rpx;
			height: 191rpx;
			box-shadow: 0px 0px 6px 0px rgba(13, 21, 28, 0.1);
		}
	}
}
.shangdian {
	width: 690rpx;
	margin: auto;
	height: 336rpx;
	background-color: #ffffff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	margin-bottom: 20rpx;
	p {
		width: 650rpx;
		height: 65rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-left: 20rpx;
	}
	.shangdian_a {
		width: 650rpx;
		height: 60rpx;
		margin-left: 20rpx;
		display: flex;
		justify-content: space-between;
		.tit_a {
			width: 250rpx;
			height: 40rpx;
			display: flex;
			justify-content: space-between;
			.tit_a_a {
				width: 100rpx;
				height: 30rpx;
				border: 2rpx solid #ff0000;
				color: #ff0000;
				font-size: 20rpx;
				text-align: center;
				line-height: 30rpx;
				border-radius: 4px;
				margin-top: 10rpx;
			}
			.tit_a_b {
				width: 100rpx;
				height: 30rpx;
				border: 2rpx solid #ff0000;
				color: #ff0000;
				font-size: 20rpx;
				text-align: center;
				line-height: 30rpx;
				border-radius: 4px;
				margin-top: 10rpx;
			}
		}
		.tit_b {
			width: 260rpx;
			height: 50rpx;
			display: flex;
			margin-top: 10rpx;
			image {
				width: 23rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
			span {
				display: block;
				width: 180rpx;
				height: 30rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 30rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	.xian_qing {
		width: 650rpx;
		height: 200rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		image {
			width: 200rpx;
			height: 200rpx;
		}
		.xiangqing {
			width: 430rpx;
			height: 200rpx;
			// border: 1rpx solid red;
			.xiangqing_name {
				width: 370rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-left: 20rpx;
				margin-bottom: 10rpx;
			}
			span {
				color: #ff0000;
				margin-left: 20rpx;
			}
			.yuan_jia {
				color: #999999;
				font-size: 24rpx;
				text-decoration: underline;
				text-decoration: line-through;
				margin-left: 15rpx;
			}
			.be_zhu {
				width: 370rpx;
				height: 80rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #999999;
				// border: 1rpx solid red;
			}
		}
	}
}
.select {
	display: flex;
	height: 100rpx;
	width: 100%;

	align-items: center;
	line-height: 104rpx;
	.selects {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999;
		padding: 0 24rpx;

		&.toggle {
			font-weight: 600;
			position: relative;
			font-size: 34rpx;
			color: #ff1a14;
		}
		&.toggle::after {
			position: absolute;
			bottom: 10%;
			left: 33%;
			width: 55rpx;
			height: 9rpx;
			border-radius: 10rpx;
			background-color: #ff1a14;
			content: '';
		}
	}
}
</style>
